{include file="public/header" /}
<body class="bgc hide-top">
<div class="layui-form" lay-filter="cartForm">
    <div class="cart-container">
        <img src="/static/index/img/icon50.png" alt="">
        <div class="cart-content">
            <div class="cart-hd flex-center">购物车
                <p class="edit">编辑</p>
            </div>
            <ul class="cart-list ">
                {foreach name="list" item="vo"}
                <li class="item">
                    <p class="label">
                        <input class="cartId" type="checkbox" value="{$vo.id}" name="cart_id[]" lay-skin="primary" lay-filter="cartId">
                    </p>
                    <p class="flex-center">
                        {if $vo.specValue}
                        <img src="{$vo.specValue.icon?:$vo.product.icon}" alt="">
                        {else}
                        <img src="{$vo.product.icon}" alt="">
                        {/if}
                    </p>
                    <div class="rgt">
                        <p class="single">{$vo.product.title}</p>
                        {if $vo.specValue}
                        <p class="spec single">{$vo.spec}</p>
                        {/if}
                        <div class="flex-layout">
                            <div class="priced">
                                {if $vo.specValue}
                                ￥<span class="vip_price">{$vo.specValue.vip_price}</span>
                                {else}
                                ￥<span class="vip_price">{$vo.product.vip_price}</span>
                                {/if}
                            </div>
                            <div class="stepper">
                                <p data-id="{$vo.id}" class="minus">-</p>
                                <input class="inpNum" type="number" value="{$vo.num}" data-id="{$vo.id}"
                                       onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,})?).*$/g, '$1')">
                                <p data-id="{$vo.id}" class="add">+</p>
                            </div>
                        </div>
                    </div>
                </li>
                {/foreach}
            </ul>
        </div>
    </div>
    <div class="cart-footer flex-layout">
        <div class="left">
            <p class="label">
                <input type="checkbox" class="cartIdAll" lay-filter="cartIdAll" lay-skin="primary" title="全选">
            </p>
            <div class="sum">
                <p>总计<span class="">￥<span class="total">0.00</span></span></p>
            </div>
        </div>
        <div class="rgt flex-layout btn">去结算</div>
        <ul class="submit-del">
            <li class="delete">删除</li>
        </ul>
    </div>
</div>
{include file="public/menu" select="3" /}
</body>
{include file="public/footer" /}
<script>
    $(function () {
        const f = layui.form, ly = layer, a = $, b = a(".btn"), m = a('.minus'), d = a('.add'), o = a('.total'),
            i = '.item', l = '.layui-form-checked', vp = '.vip_price', nm = '.inpNum', ci = '.cartId',
            cl = '.cartIdAll', fo = 'checkbox(cartId)', fol = 'checkbox(cartIdAll)', ct = a(i).length,
            fn = 'cartForm', edit = '/index/cart/edit.html', api = '/index/cart/submit.html', rm = a('.delete');
        m.click(function () {
            const t = a(this), n = t.next(), v = parseInt(n.val()), p = t.parent().prev().children(vp).text(),
                c = t.parents(i).find(l).length, id = t.attr('data-id');
            if (v > 1) {
                a.post(edit, {type: 2, id: id}, function (d) {
                    if (d.code === 1) {
                        n.val(v > 1 ? v - 1 : 1);
                        if (c > 0) v > 1 ? o.text((parseFloat(o.text()) - parseFloat(p)).toFixed(2)) : '';
                    } else {
                        ly.msg(d.msg);
                    }
                })
            }
        });
        d.click(function () {
            var t = a(this), n = t.prev(), v = parseInt(n.val()), p = t.parent().prev().children(vp).text(),
                c = t.parents(i).find(l).length, id = t.attr('data-id');
            a.post(edit, {type: 1, id: id}, function (d) {
                if (d.code === 1) {
                    n.val(v + 1);
                    if (c > 0) o.text((parseFloat(o.text()) + parseFloat(p)).toFixed(2))
                } else {
                    ly.msg(d.msg)
                }
            });
        });
        rm.click(function () {
            if (!a.isEmptyObject(f.val(fn))) {
                var d = f.val(fn);
                d.type = 3;
                _ajax(edit, d);
            } else {
                ly.msg('请选择要删除的商品');
            }
        });
        f.on(fo, function (data) {
            sum(data.elem, data.elem.checked);
            a(i).find(l).length !== ct ? a(cl)[0].checked = false : a(cl)[0].checked = true;
            a(i).find(l).length <= 0 ? o.text('0.00') : '';
            f.render('checkbox');
        });
        f.on(fol, function (data) {
            a(ci).each(function () {
                this.checked = data.elem.checked
                sum(this, data.elem.checked)
            });
            f.render('checkbox');
        });
        sum = function (elem, checked) {
            const ve = a(elem).parents(i).find(vp), v = parseFloat(ve.text()), n = ve.parent().next().children(nm).val(), t = v * n;
            checked ? o.text((parseFloat(o.text()) + t).toFixed(2)) : o.text((parseFloat(o.text()) - t).toFixed(2));
        };
        b.click(function () {
            return !a.isEmptyObject(f.val(fn)) ? _ajax(api, f.val(fn)) : ly.msg('请选择要结算的商品');
        });
        $('.inpNum').on('blur', function (){
            var num = $(this).val(), id = $(this).attr('data-id'), t = a(this), n = t.prev();
            if (num < 1) num = 1;
            a.post(edit, {type: 5, id: id, num: num}, function (d) {
                if (d.code === 1) {
                    n.val(num);
                    sumtoal();
                } else {
                    ly.msg(d.msg)
                }
            });
        });
        sumtoal = function () {
            var total = 0;
            a(i).each(function (item) {
                if (a(ci)[item].checked) {
                    var ve = a(this).find(vp), v = parseFloat(ve.text()), n = ve.parent().next().children(nm).val(), t = v * n;
                    total += t;
                }
            })
            o.text(total.toFixed(2));
        };
        var type = 1;
        $('.submit-del').hide();
        $('.edit').click(function () {
            if (type == 1) {
                $(this).html('完成');
                type = 2;
                $('.sum').hide();
                $('.cart-footer .rgt').hide();
                $('.submit-del').show();
            } else {
                $(this).html('编辑');
                type = 1;
                $('.sum').show();
                $('.cart-footer .rgt').show();
                $('.submit-del').hide();
            }
        });
    });
</script>
</html>